<template>
  <div>
    <!-- 头部 -->
    <div class="ma">
      <ul>
        <li class="za" @click="goback()">
          <a href>
            <van-icon name="arrow-left" />
          </a>
        </li>
        <li class="si">分类</li>
        <li class="wa">
          <a href>
            <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
          </a>
        </li>
        <li class="li">
          <a href>
            <van-icon name="search" />
          </a>
        </li>
      </ul>
    </div>
    <!-- 吃喝玩乐尽在美团 -->
    <!-- <div class="wo">
      <ul>
        <li class="wo1">
          <img src="@/assets/2.png" />
        </li>
        <li class="wo2">
          省钱利器 购物超划算
          <br />吃喝玩乐尽在美团
        </li>
        <li class="wo3">
          <a href>
            <img src="@/assets/3.png" />
          </a>
        </li>
      </ul>
    </div> -->
    <!-- 下拉菜单 -->

    <van-dropdown-menu class="aa" >
      <van-dropdown-item v-model="value1" :options="option1" style="width:200px"/>
      <van-dropdown-item v-model="value2" :options="option2" style="width:50%"/>
    </van-dropdown-menu>

    <!-- 列表 -->

    <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item" :title="item" />
  </van-list>
    </van-pull-refresh>-->
   

      <div class="item" v-for="item in ktvlist" :key="item.id">
      <div class="left">
        <img :src="item.img_path" />
      </div>
      <div class="middle">
        <div>你好世界</div>
        <!-- <div>{{ item.name }}</div> -->
        <div>
          <span>观众评分</span>
          <span>7.6</span>
        </div>
        <!-- <div>主演：{{ item.actors | actorsFilter }}</div> -->
        <div>美国，英国 | 150分钟</div>
      </div>
      <div class="right">
        <span>购票</span>
      </div>
    </div>
    <div>666</div>

   
    

    <FooterNav></FooterNav>
  </div>
</template>

<script>
import Vue from "vue";
import { DropdownMenu, DropdownItem } from "vant";

Vue.use(DropdownMenu);
Vue.use(DropdownItem);

import FooterNav from "../../components/FooterNav";
import { Icon } from "vant";
// import Vue from 'vue'
Vue.use(Icon);

import { mapState } from "vuex";
// 下拉菜单
export default {
  components: {
    FooterNav,
  },
  data() {
    return {
      value1: "a",
      value2: 0,
      list: [],
      // loading: false,
      // finished: false,
      // refreshing: false,
      option1: [
        { text: "默认排序", value: "a" },
        { text: "离我最近", value: "b" },
        { text: "评价最高", value: "c" },
        { text: "人气最高", value: "d" },
        { text: "价格最低", value: "e" },
      ],
      option2: [
        { text: "筛选", value: 0 },
        { text: "只看可预订Ktv", value: 1 },
        { text: "只看免预约", value: 2 },
        { text: "节假日可用", value: 3 },
      ],
    };
  },
  methods:{
     goback(){
          // this.$router.go(-1);
          console.log(11)
     }
  },

  async mounted() {
    // localhost:8080
    let url = "http://localhost:8080/zhaopian1/zhao.json";
    let res = await this.$axios.get(url);
    this.$store.dispatch("getStores", res.data);
  },
  computed: {
    ...mapState(["ktvlist"]),
  },

  // methods: {
  //   onLoad() {
  //     setTimeout(() => {
  //       if (this.refreshing) {
  //         this.list = [];
  //         this.refreshing = false;
  //       }

  //       for (let i = 0; i < 10; i++) {
  //         this.list.push(this.list.length + 1);
  //       }
  //       this.loading = false;

  //       if (this.list.length >= 30) {
  //         this.finished = true;
  //       }
  //     }, 1000);
  //   },
  //   onRefresh() {
  //     // 清空列表数据
  //     this.finished = false;

  //     // 重新加载数据
  //     // 将 loading 设置为 true，表示处于加载状态
  //     this.loading = true;
  //     this.onLoad();
  //   },
  // },
};
</script>

<style lang="scss" scoped>
// .aa{
//   height: 400px;
// }
.aa :nth-child(1){
  width: 100%;
  text-align: center;
}
// .aa :nth-child(2){
//   width: 50%;
  
// }
* {
  padding: 0px;
  margin: 0px;
}
/* 头部 */
.ma {
  width: 100%;
  height: 50px;
  background: #ffc900;
}
.ma ul {
  padding-top: 16px;
}
.ma ul li {
  float: left;
  list-style: none;
}
.ma ul li a {
  text-decoration: none;
  color: #000;
}
.za {
  margin-left: 20px;
  font-size: 20px;
}
.si {
  padding-left: 130px;
  font-size: 16px;
}
.wa {
  padding-left: 94px;
  font-size: 21px;
}
.li {
  padding-left: 20px;
  font-size: 23px;
}
/* 吃喝玩乐尽在美团 */
.wo {
  width: 100%;
  height: 50px;
  background-color: #000;
}
.wo ul{
  height: 50px;
}
.wo ul li{
  // float: left;
  height: 50px;
  list-style: none;
}
.wo1 img {
  width: 36px;
  height: 36px;
  // padding-left: 15px;
  padding-top: 6px;
}
.wo2 {
  color: #ffffff;
  font-size: 14px;
  padding-top: 4px;
  padding-left: 10px;
}
.wo3 a {
  height: 50px;
  width: 4px;
}
.wo3 a img {
  margin-left: 110px;
  padding-top: 5px;
}
// .item{
//   width: 800px;
//   height: 800px;
//   background: #000;
//   z-index: 12;
// }

.item {
  border-top: 1px solid #000;
  margin-bottom: 2px;
  margin-top: 5px;
  display: flex;
  color: #797d82;
  font-size: 13px;
  .left {
    width: 30%;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .middle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 55%;
    margin-left: 5px;
    div:nth-of-type(1) {
      color: #191a1b;
      font-size: 16px;
    }
    div:nth-of-type(3) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  /deep/ .van-dropdown-menu__bar{
    width: 100%;
  }
  // .van-dropdown-menu__bar
  .right {
    width: 15%;
    display: flex;
    align-items: center;
    span {
      border: 1px solid #ff5f16;
      background: white;
      color: #ff5f16;
      border-radius: 2px;
      height: 25px;
      line-height: 25px;
      font-size: 13px;
      width: 50px;
      text-align: center;
    }
  }
}
</style>